<template>
  <!-- 登录页面容器 -->
  <div class="login-container">
    <h2>登录</h2>
    <!-- 提交表单时调用 handleLogin 方法 -->
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { login } from "../apis/login";

export default {
  data() {
    return {
      username: "zyg123",
      password: "123456",
      currentUserId: "",
    };
  },
  methods: {

    /**
     * 处理登录逻辑的方法
     * 尝试使用用户输入的凭据进行登录
     * 如果登录成功，将用户重定向到消息页面
     * 如果登录失败，显示错误提示
     */
    async handleLogin() {
      try {
        const data = {
          username: this.username,
          password: this.password,
        };
        const response = await login(data); // 调用 login 方法
        console.log(response, "qintao");
        if (response.code === 200) {
          // 保存token到sessionStorage
          sessionStorage.setItem("token", response.data);
          // 路由跳转，然后传值t
          this.$router.push({
            path: "/message",
            query: { id: response.data.id },
          }); // 登录成功后跳转到首页
        } else {
          alert("登录失败，请检查用户名和密码1");
        }
      } catch (error) {
        console.error("登录失败:", error);
        alert("登录失败，请检查用户名和密码2");
      }
    },
  },
};
</script>

<style scoped>
/* 登录页面容器样式 */
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 15px;
}

/* 标签样式 */
label {
  display: block;
  margin-bottom: 5px;
}

/* 输入框样式 */
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* 登录按钮样式 */
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 登录按钮悬停样式 */
button:hover {
  background-color: #0056b3;
}
</style>